<template>
    <div class="registerBox">
        <h1>欢迎注册</h1>
        <van-form @submit="onSubmit" ref="textForm">
            <van-cell-group inset>
                <van-field
                    v-model="form.account"
                    name="用户名"
                    label="用户名"
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                    v-model="form.password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="请输入密码"
                    :rules="[
                        { validator: passwordValidator, message: '请填写密码' },
                    ]"
                />
                <van-field
                    v-model="form.secPassword"
                    type="password"
                    name="secPassWord"
                    label="确认密码"
                    placeholder="请输入密码"
                    :rules="[
                        { required: true, message: '请确认密码' },
                        {
                            validator: secpasswordValidator,
                            message: '两次输入密码不一致',
                        },
                    ]"
                />
                
            </van-cell-group>
            <div style="margin: 16px">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
            <div class="gologin" @click="router.replace('/login')">
                已有帐号,去登陆/GO!
            </div>
        </van-form>
    </div>
</template>

<script lang="ts" setup>
import {register} from '@/api/users'
import {} from "vant"
import crypt from "@/utils/bcrypt"
const router = useRouter();
const textForm = ref();
const form = ref({
    account: "",
    password: "",
    secPassword: "",
});
const secpasswordValidator = (v: string) => {
    if (form.value.password != v) {
        return false;
    }
    return true;
};
const passwordValidator = (v: string) => {
    if (!v) {
        return false;
    }
    if (form.value.secPassword != "") {
        textForm.value.validate("secPassWord");
    }
    return true;
};
const onSubmit = () => {
    console.log(form.value);
    let data={account:form.value.account,password:crypt.encrypt(form.value.password)}
    register(data).then(res=>{
        if(res.code===1){
            
        }
    })
    // console.log(res)
    // if(res.code){

    // }
};
</script>

<style lang="less">
.registerBox {
    position: absolute;
    margin: auto;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 340px;
    height: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    h1 {
        margin-bottom: 20px;
    }
    .gologin {
        text-align: center;
        color: rgb(77, 70, 180);
    }
}
</style>
